<template>
  <v-container>
    <v-toolbar
        color="white"
        flat
    >
      <template v-slot:extension>
        <v-tabs v-model="tab" slider-size="1" class="px-auto">
          <v-spacer></v-spacer>
          <v-tabs-slider color="primary"></v-tabs-slider>

          <v-tab key="0">
            手机号注册
          </v-tab>
          <v-divider
              class="mx-2"
              vertical
          ></v-divider>
          <v-tab key="1">
            邮箱注册
          </v-tab>
          <v-spacer></v-spacer>
        </v-tabs>
      </template>
    </v-toolbar>

    <v-tabs-items v-model="tab">
      <v-tab-item key="0">
        <v-card flat class="mt-10">

          <v-card-subtitle class="py-0">
            <v-icon>mdi-cellphone</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="phone0"
                          placeholder="请输入11位手机号"
                          :rules="[rules.required,rules.phone]"
                          v-model="data[0].phone"
                          prefix="+86"
                          @blur="forms[0].phoneOK=rules.phone(data[0].phone)===true"
            ></v-text-field>
          </v-card-text>

          <v-card-subtitle class="py-0">
            <v-icon>mdi-shield-lock-outline</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="verifyCode0"
                          placeholder="请输入验证码"
                          :rules="[rules.required,rules.verifyCode]"
                          v-model="data[0].verifyCode"
            >
              <template v-slot:append>
                <v-chip small disabled v-if="fetchCode">
                  <v-progress-circular
                      size="15"
                      width="2"
                      indeterminate
                  ></v-progress-circular>
                </v-chip>
                <v-chip small :disabled="!forms[0].phoneOK" @click="doGetVerifyCode" v-else>
                  获取验证码
                </v-chip>
              </template>
            </v-text-field>
          </v-card-text>

          <v-card-subtitle class="py-0">
            <v-icon>mdi-lock-outline</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="password0"
                          placeholder="请输入密码"
                          counter="12"
                          :rules="[rules.required,rules.password]"
                          v-model="data[0].password"
                          hint="长度6-12位，至少包含字母和数字和符号中两种"
                          :type="forms[0].confirmEye?'input':'password'"
            >
              <template v-slot:append>
                <v-btn icon>
                  <v-icon size="30" v-if="forms[0].confirmEye" @click="forms[0].confirmEye=false">mdi-eye-outline</v-icon>
                  <v-icon size="30" v-else  @click="forms[0].confirmEye=true">mdi-eye-off-outline</v-icon>
                </v-btn>
              </template>
            </v-text-field>
          </v-card-text>
          <v-card-text class="mt-0 pt-0">
            <v-row>
              <v-col cols="8">
                <v-checkbox class="mt-0 pt-0 mx-auto"
                            v-model="forms[0].checked"
                            color="primary"
                >
                  <template v-slot:label>
                    <div>
                      同意
                      <span class="text-decoration-underline text--accent-1">《服务条款》</span>
                    </div>
                  </template>
                </v-checkbox>

              </v-col>
              <v-col cols="auto" class="ml-auto">
                <v-chip outlined color="primary" small to="/login">已有账号</v-chip>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
        <v-row  align="center" justify="center" class="mb-5">
          <v-col cols="7" >
            <v-btn color="primary" rounded x-large width="100%" v-if="forms[0].posting">
              <v-progress-circular width="5" size="30" color="white" indeterminate></v-progress-circular>
            </v-btn>
            <v-btn color="primary" rounded x-large width="100%" @click="doRegister(0)" v-else>注册</v-btn>
          </v-col>

        </v-row>
      </v-tab-item>

      <v-tab-item key="1">
        <v-card flat>
          <v-card flat class="mt-10">

            <v-card-subtitle class="py-0">
              <v-icon>mdi-email-outline</v-icon>
            </v-card-subtitle>
            <v-card-text class="pb-1">
              <v-text-field class="py-0"
                            ref="email1"
                            placeholder="请输入邮箱"
                            :rules="[rules.required,rules.email]"
                            v-model="data[1].email"
              ></v-text-field>
            </v-card-text>

            <v-card-subtitle class="py-0">
              <v-icon>mdi-lock-outline</v-icon>
            </v-card-subtitle>
            <v-card-text class="pb-1">
              <v-text-field class="py-0"
                            ref="password1"
                            placeholder="请输入密码"
                            v-model="data[1].password"
                            :rules="[rules.required,rules.password]"
                            hint="长度6-12位，至少包含字母和数字和符号中两种"
                            :type="forms[1].confirmEye?'input':'password'"
              >
                <template v-slot:append>
                  <v-btn icon>
                    <v-icon size="30" v-if="forms[1].confirmEye" @click="forms[1].confirmEye=false">mdi-eye-outline</v-icon>
                    <v-icon size="30" v-else  @click="forms[1].confirmEye=true">mdi-eye-off-outline</v-icon>
                  </v-btn>
                </template>
              </v-text-field>
            </v-card-text>
            <v-card-text class="mt-0 pt-0">
              <v-row>
                <v-col cols="8">
                  <v-checkbox class="mt-0 pt-0 mx-auto"
                              v-model="forms[1].checked"
                              color="primary"
                  >
                    <template v-slot:label>
                      <div>
                        同意
                        <span class="text-decoration-underline text--accent-1">《服务条款》</span>
                      </div>
                    </template>
                  </v-checkbox>

                </v-col>
                <v-col cols="auto" class="ml-auto">
                  <v-chip outlined color="primary" small to="/login">已有账号</v-chip>
                </v-col>
              </v-row>

            </v-card-text>
          </v-card>
          <v-row  align="center" justify="center" class="mt-15 mb-5" >
            <v-col cols="7" >
              <v-btn color="primary" rounded x-large width="100%" v-if="forms[1].posting">
                <v-progress-circular width="5" size="30" color="white" indeterminate></v-progress-circular>
              </v-btn>
              <v-btn color="primary" rounded x-large width="100%" @click="doRegister(1)" v-else>注册</v-btn>
            </v-col>
          </v-row>
        </v-card>
      </v-tab-item>
    </v-tabs-items>

    <v-dialog
        v-for="(i,index) in 2" :key="i"
        v-model="forms[index].dialog"
        persistent
        max-width="290"
    >
      <v-card>
        <v-card-title class="text-center">
          请先同意服务条款哦
        </v-card-title>
        <v-card-text  class="d-flex justify-space-around">
          <v-btn light elevation="0" class="d-flex" color="lighten-4" @click="forms[index].dialog = false;forms[index].checked=false">不同意</v-btn>
          <v-btn light elevation="0" class="d-flex" color="primary" @click="forms[index].dialog = false;forms[index].checked=true">同意</v-btn>
        </v-card-text>
      </v-card>
    </v-dialog>

  </v-container>
</template>

<script>
import {rules} from "../util/util";

export default {
  name: "Register",
  data: () => ({
    tab: '',
    forms: [
      {
        checked:false,
        dialog:false,
        phoneOK:false,
        confirmEye:false,
        posting:false
      },
      {
        checked:false,
        dialog:false,
        confirmEye:false,
        posting:false
      }
    ],
    data:[
      {
        phone: '',
        verifyCode: '',
        password: '',
      },
      {
        email: '',
        password: '',
      }
    ],
    rules:rules,
    fetchCode:false

  }),
  methods:{
    doGetVerifyCode(){
      this.fetchCode = true
      let data = {
        phone:this.data[0].phone
      }
      this.$http.post("user/getVerifyCode", data, {}).then(res=>{
        this.$emit('toast',`【妆典】验证码是 ${res.data}，请妥善保管不要泄露。`,5000)
        this.data[0].verifyCode=res.data
        this.fetchCode = false
        this.forms[0].phoneOK = false
      }).catch(res=>{
        this.fetchCode = false
        this.$emit('toast',res.msg)
      })
      // this.data[0].verifyCode=''
    },
    doRegister(index){
      // 遍历forms对象中的键，拼接去取refs中对象然后调用validate验证
      let keys=Object.keys(this.data[index])
      let ok = false
      for (let key of keys){
        if (this.$refs[key+''+index]){
          ok = this.$refs[key+''+index].validate(true)
          if (!ok) return
        }
      }
      // 检查是否勾选服务条款
      if (!this.forms[index].checked){
        this.forms[index].dialog=true
        return;
      }

      this.forms[index].posting = true
      // 拼装data
      let data = this.data[index]
      data['username'] = index===0?this.data[index]['phone']:this.data[index]['email']
      this.$http.post("user/register", data, {}).then(res=>{
        this.forms[index].posting = false
        this.$router.replace("/login")
        this.$emit('toast','注册成功')
      }).catch(res=>{
        this.forms[index].posting = false
        this.$emit('toast',res.msg)
      })

    }
  }
}
</script>

<style scoped>

</style>
